<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta name="baidu-site-verification" content="U67Xy1Qfos" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CGB2003博客项目</title>

<link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}"
	rel="icon" type="image/x-ico">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet"
	href="../../static/lib/editormd/css/editormd.min.css"
	th:href="@{/lib/editormd/css/editormd.min.css}">
<link rel="stylesheet" href="../static/css/me.css"
	th:href="@{/css/me.css}">
<link rel="stylesheet"
	href="/font-awesome-4.7.0/css/font-awesome.min.css">

</head>
<body>

	<!--导航-->
	<nav id="nav" class="gird-header" style="display: none">
		<div class="ui container">
			<div class="ui inverted secondary stackable menu">
				<h2 class="ui olive header item" style="font-family: STSong">CGB2003</h2>
				<!--<div class="right m-item item m-mobile-hide">-->
				<a href="#" th:href="@{/}" class="active m-item item"><i
					class="home icon"></i>首页</a> <a href="#" th:href="@{/types/-1}"
					class="m-item item"><i class="clone outline icon"></i>分类</a> <a
					href="#" th:href="@{/archives}" class="m-item item"><i
					class="clock icon"></i>时间轴</a> <a href="#" th:href="@{/music}"
					class="m-item item"><i class="music icon"></i>音乐盒</a> <a href="#"
					th:href="@{/message}" class="m-item item"><i class="book icon"></i>留言板</a>
				<a href="#" th:href="@{/friends}" class="m-item item"><i
					class="pencil alternate icon"></i>友人帐</a> <a href="#"
					th:href="@{/picture}" class="olive m-item item"><i
					class="image icon"></i>照片墙</a> <a href="#" th:href="@{/about}"
					class="m-item item"><i class="info icon"></i>关于我</a> <a
					href="/admin" class="olive m-item item"><i
					class="fa fa-user-circle" aria-hidden="true"></i>&nbsp&nbsp&nbsp管理后台</a>
				<!--</div>-->
				<div class="right m-item item">
					<form name="search" action="#" th:action="@{/search}" method="post"
						target="_blank">
						<div class="ui icon transparent input m-margin-tb-tiny"
							style="color: white">
							<input style="color: white" type="text" name="query"
								placeholder="Search...." th:value="${query}"> <i
								onclick="document.forms['search'].submit()"
								class="search link icon"></i>
						</div>
					</form>
				</div>
			</div>
		</div>
		<a href="#"
			class="ui menu toggle black icon button m-right-top m-mobile-hide"
			style="display: none"> <i class="sidebar icon"></i>
		</a>
	</nav>




	<!--顶部图片-->
	<div class="m-bg-class_outer" style="width: 100%; height: 750px">
		<img src="../static/images/bg.jpg" th:src="@{/images/bg.jpg}" alt=""
			class="ui m-bg image" style="width: 100%; height: 100%">
		<div class="m-bg-class_cover" align="center">
			<div class="m-margin-top-maxx" align="center">
				<img class="ui circular image" align="center"
					src="../static/images/backimg.jpg" th:src="@{/images/me.jpg}"
					style="width: 150px; height: 150px;">
			</div>
			<div class="m-font-size-title-mediul" align="center">CGB2003</div>

			<div class="" align="center">
				<a href="#" class="ui tencent circular icon button"><i
					class="user icon"></i></a> <a href="#"
					class="ui wechat circular icon button"><i class="weixin icon"></i></a>
				<a href="#" class="ui qq circular icon button"
					data-content="316392836" data-position="bottom center"><i
					class="qq icon"></i></a> <a href="https://gitee.com/luziheng/LAST-MYBLOY"
					target="_blank" class="ui github circular icon button"
					data-content="点击跳转GitHub" data-position="bottom center"><i
					class="github icon"></i></a> <a href="https://gitee.com/luziheng/LAST-MYBLOY"
					target="_blank" class="ui csdn circular icon button"
					data-content="点击跳转" data-position="bottom center"><i
					class="copyright outline icon"></i></a> <a href="#"
					class="ui email circular icon button"
					data-content="2280905186@qq.com" data-position="bottom center"><i
					class="envelope  icon"></i></a>
			</div>

			<div class="ui tencent-qr flowing popup transition hidden">
				<img src="../static/images/oneStar.jpg"
					th:src="@{/images/oneStar.jpg}" alt="" class="ui rounded image"
					style="width: 110px">
				<div align="center">公众号</div>
			</div>
			<div class="ui wechat-qr flowing popup transition hidden">
				<img src="../static/images/oneStarWechat.jpg"
					th:src="@{/images/oneStarWechat.jpg}" alt=""
					class="ui rounded image" style="width: 110px">
				<div align="center">微信</div>
			</div>
			<div class="ui qq-qr flowing popup transition hidden">
				<img src="../static/images/qq.jpg" th:src="@{/images/qq.jpg}" alt=""
					class="ui rounded image" style="width: 110px">
				<div align="center">QQ</div>
			</div>

			<div class="m-font-size-text" align="center">欢迎来到TT博客，今天你学习了嘛?</div>
			<hr style="width: 40%">
			<h5 class="m-font-size-text-init-title m-margin-top-large">“人生若只如初见”</h5>
			<h5 class="m-font-size-text-init-title">“何事悲风秋画扇”</h5>
			<h5 class="m-font-size-text-init-title">“等闲变却故人心”</h5>
			<h5 class="m-font-size-text-init-title">“却道故人心易变”</h5>
			<div id="waypoint" class="ui m-margin-top-large" align="center">
				<a href="#" th:href="@{/}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
					th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
				<a href="#" th:href="@{/types/-1}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
					th:classappend="${n==2} ? 'active'"><i
					class="clone outline icon"></i>分类</a> <a href="#"
					th:href="@{/archives}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide"
					th:classappend="${n==4} ? 'active'"><i class="clock icon"></i>时间轴</a>
				<a href="#" th:href="@{/music}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide"
					th:classappend="${n==5} ? 'active'"><i class="music icon"></i>音乐盒</a>
				<a href="#" th:href="@{/message}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide"
					th:classappend="${n==6} ? 'active'"><i class="book icon"></i>留言板</a>
				<a href="#" th:href="@{/friends}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide"
					th:classappend="${n==7} ? 'active'"><i
					class="pencil alternate icon"></i>友人帐</a> <a href="#"
					th:href="@{/picture}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide"
					th:classappend="${n==8} ? 'active'"><i class="image icon"></i>照片墙</a>
				<a href="#" th:href="@{/about}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide"
					th:classappend="${n==9} ? 'active'"><i class="info icon"></i>关于我</a>
				<a href="#" th:href="@{/admin}"
					class="ui circular icon button m-opacity-small m-item item m-mobile-hide"
					th:classappend="${n==10} ? 'active'"><i class="info icon"></i>管理后台</a>

			</div>
			<div class="hiddenDiv"></div>
		</div>

	</div>

	<!--中间内容-->
	<div class="m-padded-tb-big animated fadeIn">
		<div class="ui container">
			<div class="ui stackable grid">
				<!--博客内容-->
				<div class="ui vertical segment" >
					<div class="ui m-container-small m-opacity">
						<div class="ui secondary segment " align="center">
							<i class="bookmark icon"></i>最新文章
						</div>
					</div>
					<!--博文列表-->
					<div class="ui padded segment m-padded-tb-large m-opacity"
						th:each="blog : ${pageInfo.list}">
						<div class="ui large aligned mobile reversed stackable grid">
							<!--博文信息-->
							<div class="eleven wide column " >
								<h3 class="ui header">
									<a href="#" th:href="@{/blog/{id}(id=${blog.id})}"
										target="_blank" class="m-black m-title-font"
										th:text="${blog.title}">大圣，此去欲何?</a>
								</h3>
								<p class="m-text m-margin-top-max"
									th:text="|${blog.description}......|">戴上金箍，没法爱你；放下金箍，没法保护你。我知道上天不会给我第二次机会，曾经我们说好的永远，原来也仅仅只有，十二画，而已。“大圣，此去欲何?”“踏南天，碎凌霄。”“若一去不回……”“便一去不回”
									其实很多时候，我们都是有机会的，最后真正放弃的，是我们自己。......</p>
								<div class="ui m-margin-top-max grid">
									<div class="eleven wide column">
										<div class="ui mini horizontal link list">
											<div class="item">
												<img src="../static/images/me.jpg"
													th:src="@{${blog.avatar}}" alt="" class="ui avatar image">
												<div class="content">
													<a href="#" th:href="@{/about}" target="_blank"
														class="header" th:text="${blog.nickname}">oneStar</a>
												</div>
											</div>
											<div class="item">
												<i class="calendar icon"></i><span
													th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-01-01</span>
											</div>
											<div class="item">
												<i class="eye icon"></i> <span th:text="${blog.views}">2222</span>
											</div>
											<div class="item">
												<i class="comment outline icon"></i> <span
													th:text="${blog.commentCount}">2222</span>
											</div>
										</div>
									</div>
									<div class="right aligned five wide column">
										<a href="#" target="_blank"
											class="ui teal basic label m-padded-tiny m-text-thin"
											th:text="${blog.typeName}">好文</a>
									</div>
								</div>
							</div>
							<!--博文图片-->
							<div class="five wide column">
								<a href="#" th:href="@{/blog/{id}(id=${blog.id})}"
									target="_blank"> <img src="../static/images/backimg1.jpg"
									th:src="@{${blog.firstPicture}}" alt=""
									class="ui rounded image">
								</a>
							</div>

						</div>
					</div>
				</div>
				<!--分页-->
				<div class="ui bottom attached segment m-opacity stackable grid">
					<div class="three wide column" align="center">
						<a class="item"
							th:href="@{/(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}"
							th:unless="${pageInfo.isFirstPage}">上一页</a>
					</div>

					<div class="ten wide column" align="center">
						<p>
							<span th:text="${pageInfo.pageNum}"></span> / <span
								th:text="${pageInfo.pages}"></span>
						</p>
					</div>

					<div class="three wide column" align="center">
						<a class="item"
							th:href="@{/(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}"
							th:unless="${pageInfo.isLastPage}">下一页</a>
					</div>
				</div>

			</div>
		</div>

	</div>


	<!--置顶图标-->
	<div id="toolbar" class="m-padded-tb-large m-fixed m-right-bottom"
		style="display: none">
		<a href="#" class="ui teal icon button"><i class="chevron up icon"></i>
		</a>
	</div>



	<br>
	<br>
	<br>
	<!--底部栏-->
	<footer
		class="ui inverted vertical segment m-padded-tb-massive m-opacity">
		<!--容器-->
		<div class="ui center aligned container">
			<div class="ui inverted divided stackable grid">
				<div class="four wide column">
					<div style="font-size: large; font-weight: bold"
						class="ui inverted m-text-thin m-text-spaced m-margin-top-max">联系我</div>
					<!--<div id="newblog-container">-->
					<!--<div class="ui inverted link list" th:fragment="newblogList">-->
					<!--<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">最新文章</a>-->
					<!--</div>-->
					<!--</div>-->
					<div class="ui inverted link list">
						<div href="#" class="m-text-thin">QQ：112698488</div>
					</div>
				</div>

				<div class="four wide column">
					<div class="ui inverted link list">
						<div class="item">
							<!--微信二维码-->
							<div style="font-size: large; font-weight: bold"
								class="ui inverted m-text-thin m-text-spaced ">关注公众号</div>
							<img src="../static/images/oneStar.jpg"
								th:src="@{/images/oneStar.jpg}"
								class="ui m-margin-top rounded image" alt=""
								style="width: 110px">
						</div>
					</div>
				</div>

				<div class="four wide column">
					<div class="ui inverted link list">
						<div class="item">
							<!--微信二维码-->
							<div style="font-size: large; font-weight: bold"
								class="ui inverted m-text-thin m-text-spaced ">问题交流（QQ群）</div>
							<img src="../static/images/QQ-question.jpg"
								th:src="@{/images/QQ-question.jpg}"
								class="ui m-margin-top rounded image" alt=""
								style="width: 110px">
						</div>
					</div>
				</div>
				<!--博客运行时间统计-->
				<div class="four wide column">
					<div style="font-size: large; font-weight: bold"
						class="ui inverted  m-text-thin m-text-spaced m-margin-top">客栈信息</div>
					<!--<p id="htmer_time" class="item m-text-thin"></p>-->
					<div id="blog-message">
						<div class="ui inverted link list"
							style="align-content: center; margin-top: 10px"
							th:fragment="blogMessage">
							<div class="m-text-thin"
								style="text-align: left; margin-left: 75px;">
								文章总数：
								<h2 class="ui orange header m-inline-block m-margin-top-null"
									style="font-size: medium;" th:text="${blogTotal}">14</h2>
								篇
							</div>
							<div class="m-text-thin"
								style="text-align: left; margin-left: 75px">
								访问总数：
								<h2 class="ui orange header m-inline-block m-margin-top-null"
									style="font-size: medium;" th:text="${blogViewTotal}">14</h2>
								次
							</div>
							<div class="m-text-thin"
								style="text-align: left; margin-left: 75px">
								评论总数：
								<h2 class="ui orange header m-inline-block m-margin-top-null"
									style="font-size: medium;" th:text="${blogCommentTotal}">
									14</h2>
								条
							</div>
							<div class="m-text-thin"
								style="text-align: left; margin-left: 75px">
								留言总数：
								<h2 class="ui orange header m-inline-block m-margin-top-null"
									style="font-size: medium;" th:text="${blogMessageTotal}">
									14</h2>
								条
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="ui inverted section divider"></div>
			<div style="color: #F08047; margin-top: -18px"
				class="ui inverted m-text-thin m-text-spaced">
				TT-Blog:<span id="htmer_time" class="item m-text-thin"></span>
				(*๓´╰╯`๓)
			</div>
		</div>
		</div>

	</footer>



	<script
		src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
	<script src="../static/lib/waypoints/jquery.waypoints.min.js"
		th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>

	<script>
		// $('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog");

		$('#blog-message').load(
				/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");

		// 运行时间统计
		function secondToDate(second) {
			if (!second) {
				return 0;
			}
			var time = new Array(0, 0, 0, 0, 0);
			if (second >= 365 * 24 * 3600) {
				time[0] = parseInt(second / (365 * 24 * 3600));
				second %= 365 * 24 * 3600;
			}
			if (second >= 24 * 3600) {
				time[1] = parseInt(second / (24 * 3600));
				second %= 24 * 3600;
			}
			if (second >= 3600) {
				time[2] = parseInt(second / 3600);
				second %= 3600;
			}
			if (second >= 60) {
				time[3] = parseInt(second / 60);
				second %= 60;
			}
			if (second > 0) {
				time[4] = second;
			}
			return time;
		}
		function setTime() {
			/*此处为网站的创建时间*/
			var create_time = Math.round(new Date(Date.UTC(2020, 05, 20, 15,
					15, 15)).getTime() / 1000);
			var timestamp = Math
					.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
			currentTime = secondToDate((timestamp - create_time));
			currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
					+ currentTime[2] + '时' + currentTime[3] + '分'
					+ currentTime[4] + '秒';
			document.getElementById("htmer_time").innerHTML = currentTimeHtml;
		}
		setInterval(setTime, 1000);

		var waypoint = new Waypoint({
			element : document.getElementById('waypoint'),
			handler : function(direction) {
				if (direction == 'down') {
					$('#toolbar').show(100);
				} else {
					$('#toolbar').hide(500);
				}
				console.log('Scrolled to waypoint!  ' + direction);
			}
		})

		$('.menu.toggle').click(function() {
			$('.m-item').toggleClass('m-mobile-show');

		});

		// 显示公众号
		$('.tencent').popup({
			popup : $('.tencent-qr'),
			position : 'bottom center'
		});

		// 显示微信
		$('.wechat').popup({
			popup : $('.wechat-qr'),
			position : 'bottom center'
		});

		// 显示QQ
		$('.qq').popup({
			popup : $('.qq-qr'),
			position : 'bottom center'
		});

		// 显示邮箱
		$('.email').popup();

		// 显示CSDN
		$('.csdn').popup();

		// 显示github
		$('.github').popup();

		// 导航栏显示
		var waypoint = new Waypoint({
			element : document.getElementById('waypoint'),
			handler : function(direction) {
				if (direction == 'down') {
					$('#nav').show(500);
				} else {
					$('#nav').hide(500);
				}
				console.log('Scrolled to waypoint!  ' + direction);
			}
		})
	</script>
</body>
</html>